<template>
    <Modal v-model="show" title="增加" @on-ok="ok" :loading="loading">
        <Form ref="dictForm" :model="dictForm" :rules="dictFormRule">
            <FormItem label="字典类型" prop="type">
                <Input type="text" :maxlength=10 v-model="dictForm.type" placeholder="请输入字典类型">
                </Input>
            </FormItem>
            <FormItem label="字典编码" prop="code">
                <Input type="text" :maxlength=10 v-model="dictForm.code" placeholder="请输入字典编码">
                </Input>
            </FormItem>
            <FormItem label="字典数值" prop="value">
                <Input type="text" :maxlength=10 v-model="dictForm.value" placeholder="请输入字典数值">
                </Input>
            </FormItem>
            <FormItem label="字典描述" prop="text">
                <Input type="text" :maxlength=10 v-model="dictForm.text" placeholder="请输入字典描述">
                </Input>
            </FormItem>
        </Form>
    </Modal>
</template>
<script>
    import {isExit,addDict} from '../../../api/sys/dict/dict-api';
    export default {
        name: 'addDict',
        props: {
            value: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dictForm: {
                    type: '',
                    text: '',
                    code: '',
                    value:''
                },
                dictFormRule: {
                    type: [
                        {required: true, message: '请输入字典类型', trigger: 'blur'},
                        {type: 'string', max: 10, message: '字典类型允许输入最大长度为10个字符', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入字典编码.', trigger: 'blur'},
                        {type: 'string', max: 10, message: '字典编码允许输入最大长度为10个字符', trigger: 'blur'},
                        {
                            validator: this.checkDict({
                                tip: '字典编码重复',
                                response: 'exist'
                            }), trigger: 'blur'
                        }
                    ],
                    value :[
                        {required: true, message: '请输入字典数值.', trigger: 'blur'},
                        {type: 'string', max: 10, message: '字典数值允许输入最大长度为10个字符', trigger: 'blur'}
                    ],
                    text: [
                        {required: true, message: '请输入字典描述', trigger: 'blur'},
                        {type: 'string', max: 10, message: '字典描述允许输入最大长度为10个字符', trigger: 'blur'}
                    ]
                },
                show: this.value,
                loading: true
            };
        },
        watch: {
            value(val) {
                this.show = val;
            },
            show(val) {
                //当重新显示增加数据的时候重置整个form表单
                if(val){
                    this.$refs['dictForm'].resetFields();
                }else{// 反之则关闭页面
                    this.closeModal(val);
                }
            }
        },
        methods: {
            checkDict(json) {
                let _this = this;
                return function (rule, value, callback) {
                    let type = _this.dictForm.type;
                    let code = value;
                    isExit({type, code}).then(res => {
                        if (res.result) {
                            callback();
                        } else {
                            callback(new Error(json.tip ? json.tip : res.msg));
                        }
                    });
                };
            },
            ok() {
                this.$refs['dictForm'].validate((valid) => {
                    if (valid) {
                        addDict(this.dictForm).then(res => {
                            if(res.result){
                                this.$Message.success(res.msg);
                                // 提交表单数据成功则关闭当前的modal框
                                this.closeModal(false);
                                // 同时调用父页面的刷新页面的方法
                                this.$emit('handleSearch');
                            }else{
                                this.$Message.err(res.msg);
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败，请检查表单!');
                    }
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    },1000);
                });
            },
            closeModal(val) {
                this.$emit('input', val);
            }
        }
    };
</script>